import React, { Component } from 'react'
import { NavBar } from 'antd-mobile'
import "./Cate.less"
import { SearchBar } from 'antd-mobile';
import Left from "./components/Left/Left"
import Right from "./components/Right/Right"
import { connect } from "react-redux"
import { actions, getArr, getN, getGoodsList } from "../../store/modules/cate"
import { bindActionCreators } from 'redux';
class Cate extends Component {
    componentDidMount() {
        //   1.9 触发redux中的请求
        let { cate: { reqGetgoodsAction, reqGoodsList } } = this.props
        reqGetgoodsAction()
        reqGoodsList(1, 0)
    }
    render() {
        // 1.10
        let { arr, n, cate: { reqGoodsList }, goodsList } = this.props
        return (
            <div className="cate">
                <NavBar>分类</NavBar>
                <SearchBar placeholder="Search" maxLength={8} onSubmit={() => this.props.history.push("/search")} />
                <div className="conn">
                    {/* 左边分类数据 */}
                    {arr.length > 0 ? <Left arr={arr} n={n} reqGoodsList={(id, index) => reqGoodsList(id, index)}></Left> : null}



                    <div className="right">
                        {
                            goodsList.length > 0 ? <Right categoodLsit={goodsList}></Right> : <div>暂无数据</div>
                        }
                    </div>

                </div>
            </div>
        )
    }
}


// 取数据
const mapStateToProps = (state) => {
    return {
        //1.7 取数据
        arr: getArr(state),
        n: getN(state),
        goodsList: getGoodsList(state)

    }
}
// 取方法的
const mapDispatchToProps = (dispatch) => {
    return {
        //1.8 将方法取回来
        cate: bindActionCreators(actions, dispatch),
    };
};

// 导出
export default connect(mapStateToProps, mapDispatchToProps)(Cate);